<template>
  <div class="index-wrap">
       <Top :title="title" :showSearch="true"></Top>
      <div class="swp">
          <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#288692">
                <van-swipe-item v-for="item in swipeArr" :key="item.img[0]._id">
                    <img :src="item.img[0].url" alt="" srcset="">
                </van-swipe-item>
            </van-swipe>
      </div>
      <div class="content">
          <p>今日上新</p>
          <div class="dontent-in">
            <van-card
                v-for="item in goodData"
                :key="item._id"
                :price="item.retailPrice"
                :origin-price="item.originalPrice"
                :title="item.name"
                @click-thumb="goRetail(item._id)"
                >
                <template #thumb>
                    <div v-if="item.num">
                        <img  :src="item.img[0].url" alt="" srcset="" class="img-thumb">
                        <p class="tips">仅剩{{item.num}}件</p>
                    </div>
                    <div v-else>
                        <img :src="item.img[0].url" alt="" srcset="" class="img-thumb" :class="item.num? '': 'no'">
                        <img src="../assets/no.png" alt="" srcset="" class="none">
                    </div>
                </template>
                <template #tags>
                    <van-tag v-for="(i, index) in item.tag" :key="index" plain type="danger">{{i}}</van-tag>
                </template>
                <template #footer>
                    <van-button size="mini" @click="contact">{{item.num?'联系我': '可预订'}}</van-button>
                </template>
            </van-card>
          </div>
      </div>
  </div>
</template>

<script>
import Top from '../components/top'
import { getTodayGoods, getSwipeImg } from '../utils/api/goods'
export default {
    name: 'index',
    components: {
        Top
    },
    data () {
        return {
            swipeArr: [],
            goodData: [],
            title: '首页'
        }
    },
    created () {
        this.getImgArr()
        this.getTodayData()
    },
    methods: {
        async getTodayData () {
            let res = await getTodayGoods()
            this.goodData = res.data.items
        },
        async getImgArr() {
            let res = await getSwipeImg()
            this.swipeArr = res.data.items
        },
        goRetail(id) {
            this.$router.push({
                path: `/detail/${id}`
            })
        },
        contact () {
             this.$router.push({
                path: '/addMe'
            })
        }
    }
}
</script>

<style scoped lang="less">
@themeColor: #45BE93;
@borderColor: #FAF6EE;
/deep/.van-nav-bar__text,
/deep/ .van-nav-bar .van-icon {
    color: @themeColor;
}
    .my-swipe .van-swipe-item {
        color: #fff;
        font-size: 20px;
        height: 300px;
        text-align: center;
        background-color: #fff;
        img {
            height: 100%;
        }
  }
  .content {
      box-sizing: border-box;
      padding: 20px;
      p {
        font-size: 20px;
        font-weight: bold;
        color: @themeColor;
        border-bottom: 1px solid @borderColor;
        padding-bottom: 10px;
      }
      .van-card__title {
          margin-bottom: 6px;
      }
      .van-tag {
          margin-right: 4px;
      }
      .van-card{
          margin-bottom: 10px;
      }
      .van-card__thumb {
          width: 120px;
          height: auto;
      }
      .img-thumb {
          width: 120px;
      }
      .none {
          position: absolute;
          top: 10px;
          left: 0;
          width: 120px;
      }
      .no {
          -webkit-filter: grayscale(100%)
      }
      .tips {
          position: absolute;
          bottom: 0;
          left: 0;
          font-size: 12px;
          text-align: center;
          width: 100%;
          background-color: rgba(0, 0, 0, .6);
          padding-bottom: 0;
          color: #fff;
      }
  }
</style>